<div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h1>注册</h1>
            <div class="col-md-8">
                <div class="alert alert-info" *ngIf="!success">
                    <fa-icon icon="info-circle" fixedWidth="true"></fa-icon> 电子邮件地址仅用于保护您的账户，我们不会出售它们或发送任何垃圾邮件。
                </div>
            </div>

            <div class="alert alert-success" *ngIf="success">
                <strong>用户注册成功！</strong> 您现在可以登录了。
            </div>

            <div class="alert alert-danger" *ngIf="error">
                <strong>注册失败！</strong> 请稍后再试。
            </div>

            <div class="alert alert-danger" *ngIf="errorUserExists">
                <strong>登录名已被注册！</strong> 请选择另一个。
            </div>

            <div class="alert alert-danger" *ngIf="errorEmailExists">
                <strong>邮箱已被使用！</strong> 请选择另一个。
            </div>

            <div class="alert alert-danger" *ngIf="doNotMatch">
                密码和确认密码不匹配！
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-8">
            <form name="form" role="form" (ngSubmit)="register()" [formGroup]="registerForm" *ngIf="!success">
                <div class="form-group">
                    <label class="form-control-label" for="login">用户名</label>
                    <input type="text" class="form-control" id="login" name="login" placeholder="您的用户名"
                           formControlName="login" #login>

                    <div *ngIf="registerForm.get('login')!.invalid && (registerForm.get('login')!.dirty || registerForm.get('login')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('login')?.errors?.required">
                            用户名是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('login')?.errors?.minlength">
                            用户名至少需要1个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('login')?.errors?.maxlength">
                            用户名不能超过50个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('login')?.errors?.pattern">
                            用户名只能包含字母和数字。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="email">电子邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="您的电子邮箱"
                             formControlName="email">

                    <div *ngIf="registerForm.get('email')!.invalid && (registerForm.get('email')!.dirty || registerForm.get('email')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('email')?.errors?.required">
                            电子邮箱是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('email')?.errors?.invalid">
                            电子邮箱格式无效。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('email')?.errors?.minlength">
                            电子邮箱至少需要5个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('email')?.errors?.maxlength">
                            电子邮箱不能超过100个字符。
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="password">新密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="新密码"
                            formControlName="password">

                    <div *ngIf="registerForm.get('password')!.invalid && (registerForm.get('password')!.dirty || registerForm.get('password')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('password')?.errors?.required">
                            密码是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('password')?.errors?.minlength">
                            密码至少需要4个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('password')?.errors?.maxlength">
                            密码不能超过50个字符。
                        </small>
                    </div>

                    <jhi-password-strength-bar [passwordToCheck]="registerForm.get('password')!.value"></jhi-password-strength-bar>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="confirmPassword">确认新密码</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="确认新密码"
                            formControlName="confirmPassword">

                    <div *ngIf="registerForm.get('confirmPassword')!.invalid && (registerForm.get('confirmPassword')!.dirty || registerForm.get('confirmPassword')!.touched)">
                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('confirmPassword')?.errors?.required">
                            确认密码是必填项。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('confirmPassword')?.errors?.minlength">
                            确认密码至少需要4个字符。
                        </small>

                        <small class="form-text text-danger"
                               *ngIf="registerForm.get('confirmPassword')?.errors?.maxlength">
                            确认密码不能超过50个字符。
                        </small>
                    </div>
                </div>

                <button type="submit" [disabled]="registerForm.invalid" class="btn btn-primary">
                    我已阅读并理解以下条款和条件，创建我的账户
                </button>
            </form>
            <br />
            <div *ngIf="!success">
                <h4>个人数据使用</h4>
                <p>
                    <small>
                        微服务代码模版 仅使用您的电子邮件地址来保护您的账户（通常是在您忘记密码时向您发送重置链接），或在服务发生重要事件时与您联系。我们不会用它来发送垃圾邮件或将其提供给任何第三方。您还可以随时通过点击设置中的"删除我的账户"按钮轻松删除您的账户。
                    </small>
                </p>
                <h4>免责声明</h4>
                <p>
                    <small>
                        在适用法律允许的范围内，本程序不提供任何保证。除非另有书面说明，版权持有人和/或其他方以"按原样"提供程序，不提供任何形式的明示或暗示保证，包括但不限于对适销性和特定用途适用性的暗示保证。程序的质量和性能的全部风险由您承担。如果程序被证明有缺陷，您将承担所有必要的服务、修理或纠正的费用。
                    </small>
                </p>

                <h4>责任限制</h4>
                <p>
                    <small>
                        除非适用法律要求或书面同意，否则任何版权持有人或根据上述许可修改和/或传播程序的任何其他方，均不对您承担损害赔偿责任，包括因使用或无法使用程序而产生的任何一般、特殊、偶然或间接损害（包括但不限于数据丢失或数据不准确，或您或第三方遭受的损失，或程序无法与任何其他程序一起运行），即使此类持有人或其他方已被告知此类损害的可能性。
                    </small>
                </p>
            </div>
        </div>
    </div>
</div>
